<!-- 相当于给模板定义一个名字 define end 成对出现 -->
{{ define "backstage/goodsMgr.html" }}
    <div class="content">
        <div class="opt-tip" id="tip"></div>
        <div class="cont-top">商品管理&nbsp;>></div>
        <div class="cont-bot">
            <div class="add"><button class="btn color-btn" onclick="addFun()">新增商品</button></div>
            <table border="1">
                <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>类别</th>
                        <th>单价 (￥)</th>
                        <th>数量</th>
                        <th>商品内容</th>
                        <th>图片</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {{range $key,$value:=.info}}
                        <tr>
                            <td>{{$value.Title}}</td>
                            <td>
                                {{if eq $value.Category 1}}
                                    水果
                                {{else if eq $value.Category 2}}
                                    鲜花
                                {{else if eq $value.Category 3}}
                                    蔬菜
                                {{else if eq $value.Category 4}}
                                    休闲零食
                                {{else}}
                                    酒水饮料
                                {{end}}
                            </td>
                            <td>{{$value.Price}}</td>
                            <td>{{$value.Number}}</td>
                            <td>{{$value.Content}}</td>
                            <td>
                                {{if ne $value.ImgPath ""}}
                                    <img class="img" src="/static/upload/goods/{{$value.ImgPath}}" alt="">
                                {{end}}
                            </td>
                            <td>{{DbTimeToTime $value.CreateTime}}</td>
                            <td>{{DbTimeToTime $value.UpdateTime}}</td>
                            <td>
                                <button class="btn color-btn" onclick="editFun({{$value.Id}})">编辑</button>
                                <button class="btn color-btn mg-btn" onclick="deleteFun({{$value}})">删除</button>
                                <button class="btn color-btn mg-btn" onclick="detailFun({{$value.Id}})">详情</button>
                            </td>
                        </tr>
                    {{else}}
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    {{end}}
                </tbody>
            </table>
            <div class="paging">
                <span>当前第{{.curPage}}页{{.curTiao}}条&nbsp;&nbsp;共{{.sumPage}}页{{.sumTiao}}条&nbsp;&nbsp;每页{{.pageSize}}条&nbsp;</span>
                <button id="preId" onclick="prePage()">上一页</button>
                <button id="nextId" onclick="nextPage()">下一页</button>
            </div>
        </div>
    </div>

    <script>
        init();
        function init(){
            // 初始化操作提示
            let showTag={{.errTag}};
            let element = document.getElementById("tip");
            if (showTag==1){
                element.style.color="green";
                element.innerText="操作成功！";
                setTimeout(() => {
                    element.style.display="none";
                }, 3000);
            } else if (showTag==-1){
                element.style.color="red";
                element.innerText="操作失败！";
                setTimeout(() => {
                    element.style.display="none";
                }, 3000);
            } else {
                element.style.display="none";
            }

            // 初始化分页
            let curPage={{.curPage}};
            let sumPage={{.sumPage}};
            if(curPage==1){
                document.getElementById("preId").disabled=true;
                if(sumPage<=1){
                    document.getElementById("nextId").disabled=true;
                }
            } else {
                if(curPage==sumPage){
                    document.getElementById("nextId").disabled=true;
                }
            }
        }

        function addFun(){
            location.href="/back/goodsMgr/add";
        }
        function editFun(id){
            location.href="/back/goodsMgr/edit/"+id;
        }
        function deleteFun(obj){
            let conf = confirm("确定删除【"+obj.title+"】吗？");
            if(conf){
                location.href="/back/goodsMgr/delete/"+obj.id;
            }
        }
        function detailFun(id){
            location.href="/back/goodsMgr/detail/"+id;
        }

        function prePage(){
            let curPage={{.curPage}};
            let prePage = curPage-1;
            location.href="/back/goodsMgr/curPage/"+prePage;
        }
        function nextPage(){
            let curPage={{.curPage}};
            let nextPage = curPage+1;
            location.href="/back/goodsMgr/curPage/"+nextPage;
        }
    </script>

    <style>
        .content{
            margin: 10px;
            font-size: 14px;
            position: relative;
            .opt-tip{
                position: absolute; /* 绝对定位 */
                top: 50%; /* 相对于父容器垂直居中 */
                left: 50%; /* 相对于父容器水平居中 */
                transform: translate(-50%, -50%); /* 微调位置以精确居中 */
                z-index: 10; /* 确保悬浮块在主块之上 */
                font-size: 18px;
                border: 1px solid white;
                border-radius: 10px;
                padding: 10px;
                background-color: #ffa54f;
            }
            .cont-top{
                color: rgb(210, 56, 153);
                font-weight: bold;
                margin-bottom: 20px;
            }
            .cont-bot{
                margin-left: 40px;
                .img{
                    width: 80px;
                    height: 80px;
                }
                .add {
                    margin:  0 20px 10px;
                }
                .btn {
                    font-size: 15px;
                    cursor: pointer;
                }
                .color-btn{
                    color: darkgreen;
                }
                .mg-btn {
                    margin-top: 5px;
                }
                table {
                    border-collapse: collapse; /*合并为一个单一的边框*/
                    border-color: black; /*边框颜色按实际自定义即可*/
                    background-color: #fff;
                    width: 100%; /* 或者具体宽度 */
                    height: 60vh;
                    display: block; /* 重要：将table设置为块级元素 */
                    overflow: auto; /* 水平和垂直滚动 */
                }
                thead tr th {
                    text-align: center;
                    width: 60vh;
                    height: 40px;
                    background-color: #89e97a;
                }
                tbody tr td {
                    padding: 5px;
                    text-align: center;
                }
                .paging{
                    text-align: right;
                    margin: 10px;
                }
            }
        }
    </style>
{{ end }}